<script setup lang="ts">
import { ref } from "vue";
const { waterForm, tableHeaders } = defineProps<{
  waterForm: Object; // 定义采样时间的类型
  tableHeaders: Array; // 定义采样时间的类型
  tabler: Array; // 定义采样时间的类型
}>();

const nd1 = ref("含氧ɸ'(O₂)(%)");
const nd2 = ref("监测浓度C(mg/m³)");
const nd3 = ref("排放浓度C'(mg/m³)");
</script>

<template>
  <div>
    <div
      v-for="(pageData, pageIndex) in tableHeaders"
      :key="pageIndex"
      style="padding: 0 30px"
    >
      <h1 style="text-align: center; padding-top: 40px">
        固定污染源废气 颗粒物分析原始记录
      </h1>
      <div>SXLPHJ/JL/CX-22-78</div>
      <table class="table">
        <tr style="background-color: #f2f2f2">
          <td colspan="3">任务编号</td>
          <td colspan="3">
            <span>{{ waterForm.task_name }}</span>
          </td>
          <td colspan="2">采样日期</td>
          <td colspan="1">
            <span>{{ waterForm.sampling_time }}</span>
          </td>
          <td colspan="2">分析日期</td>
          <td colspan="1">
            <span>{{ waterForm.anal_time }}</span>
          </td>
          <td colspan="3">环境温度</td>
          <td colspan="2">
            <span>{{ waterForm.temperature }}℃</span>
          </td>
          <td>环境湿度</td>
          <td>
            <span>{{ waterForm.humidity }}%RH</span>
          </td>
        </tr>
        <!-- 第一行 -->
        <tr>
          <td>分析方法</td>
          <td colspan="14">
            <span>{{ waterForm.method }}</span>
          </td>
          <td colspan="2">基准含氧量ɸ(O₂)</td>
          <td colspan="3">
            <span>{{ waterForm.jzyhl }}&nbsp; %</span>
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="13">
            <div style="display: flex; align-items: center">
              恒重仪器:
              <div
                v-for="(item, index) in waterForm.device.device_name"
                :key="index"
              >
                {{ item }}
              </div>
              仪器型号:
              <div
                v-for="(item, index) in waterForm.device.device_model"
                :key="index"
              >
                {{ item }}
              </div>
              仪器编号:
              <div
                v-for="(item, index) in waterForm.device.device_number"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </td>
          <td colspan="1" rowspan="2">计算公式</td>
          <td colspan="5" rowspan="2">
            {{ waterForm.js_formula }}
          </td>
        </tr>
        <tr style="background-color: #f2f2f2">
          <td colspan="13">
            <div style="display: flex; align-items: center">
              天平级别:
              <div
                v-for="(item, index) in waterForm.device.tp_device_name"
                :key="index"
              >
                {{ item }}
              </div>
              天平型号:
              <div
                v-for="(item, index) in waterForm.device.tp_device_model"
                :key="index"
              >
                {{ item }}
              </div>
              天平编号:
              <div
                v-for="(item, index) in waterForm.device.tp_device_number"
                :key="index"
              >
                {{ item }}
              </div>
            </div>
          </td>
        </tr>

        <tr>
          <td colspan="3">标准滤筒编号</td>
          <td colspan="2">原始质量(g)</td>
          <td colspan="2">采样日期</td>
          <td colspan="1">称重1(g)</td>
          <td colspan="2">称重2(g)</td>
          <td colspan="1">称重3(g)</td>
          <td colspan="3">环境温度</td>
          <td colspan="2">与原始质量差值(g)</td>
          <td colspan="2">允许差值(g)</td>
          <td colspan="3">是否合格</td>
        </tr>
        <tr v-for="rowIndex in 2" :key="rowIndex">
          <td colspan="3" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="1" />
          <td colspan="2" />
          <td colspan="1" />
          <td colspan="3" />
          <td colspan="2" />
          <td colspan="2" />
          <td colspan="3" />
        </tr>
      </table>
      <table class="table">
        <tr>
          <td colspan="2">样品唯一性标识</td>
          <td rowspan="2">
            标况体积
            <br />
            V(m³)
          </td>
          <td rowspan="2">
            含氧量
            <br />
            ɸ'(O₂)
            <br />
            (%)
          </td>
          <td colspan="3">滤筒终重A(g)</td>
          <td rowspan="2">
            样品净重
            <br />
            m(g)
          </td>
          <td rowspan="2">
            样品浓度
            <br />
            C₁(mg/m³)
          </td>
          <td rowspan="2">
            监测浓度
            <br />
            C(mg/m³)
          </td>
          <td rowspan="2">
            排放浓度
            <br />
            C'(mg/m³)
          </td>
          <td rowspan="2">备注</td>
        </tr>
        <tr>
          <td>样品编号</td>
          <td>滤筒编号</td>
          <td>终重1</td>
          <td>终重2</td>
          <td>终重3</td>
        </tr>

        <tr v-for="(row, rowIndex) in pageData" :key="rowIndex">
          <template v-if="rowIndex == 0 || rowIndex % 3 == 0">
            <template
              v-for="(key, colIndex) in Object.keys(row)"
              :key="colIndex"
            >
              <td
                v-if="
                  colIndex === 3 ||
                  colIndex === 9 ||
                  colIndex === 10 ||
                  colIndex === 11
                "
                :rowspan="3"
              >
                "dddddd"
              </td>
              <td v-else>{{ key }}</td>
            </template>
          </template>
          <template v-else>
            <template
              v-for="(key, colIndex) in Object.keys(row)"
              :key="colIndex"
            >
              <td
                v-if="
                  colIndex !== 3 &&
                  colIndex !== 9 &&
                  colIndex !== 10 &&
                  colIndex !== 11
                "
              >
                {{ row[key] }}
              </td>
            </template>
          </template>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="19">备注</td>
        </tr>
      </table>
      <!--<table class="table">
        <tr>
          <td colspan="6">
            <div class="table-td">平行样测定</div>
          </td>
        </tr>
        <tr>
          <td>样品编号</td>
          <td>PH值</td>
          <td>平均值</td>
          <td>差值(PH单位)</td>
          <td>允许差(PH单位)</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item, index) in waterForm.pxycd" :key="index">
          <td>
            {{ item.px_ypbh }}
          </td>
          <td>
            {{ item.px_ypbh }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_phz }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_cz }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_yxc }}
          </td>
          <td v-if="index === 0 || index === 2" rowspan="2">
            {{ item.px_sfhg }}
          </td>
        </tr>
        <tr>
          <td colspan="6">
            <div class="table-td">标准样品测定</div>
          </td>
        </tr>
        <tr>
          <td colspan="2">标样批号</td>
          <td colspan="2">测定结果</td>
          <td>标准值</td>
          <td>是否合格</td>
        </tr>
        <tr v-for="(item, index) in waterForm.bzycd" :key="index">
          <td colspan="2">
            {{ item.bz_byph }}
          </td>
          <td colspan="2">
            {{ item.bz_cdjg }}
          </td>
          <td>
            {{ item.bz_bzz }}
          </td>
          <td>
            {{ item.bz_sfhg }}
          </td>
        </tr>
        <tr>
          <td colspan="2">备注</td>
          <td colspan="4">
            {{ waterForm.notes }}
          </td>
        </tr>
      </table> -->
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 20px;
        "
      >
        <div>分析人：</div>
        <div>校核人：</div>
        <div>审核人：</div>
        <div>第 {{ pageIndex + 1 }} 页 / 共 {{ tableHeaders.length }} 页</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置表格的边框、外边距等 */
table {
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 2px 10px;
  font-size: 11px;
  text-align: center;
  height: 20px;
}

tr {
  page-break-inside: avoid;
}

.fs12 {
  font-size: 12px;
}

.table {
  width: 100%;
}

/* 打印时隐藏所有默认的头部和尾部 */
@media print {
  /* 隐藏页眉和页脚 */
  @page {
    margin: 0;
  }

  table {
    page-break-inside: avoid;
  }

  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }

  th,
  td {
    page-break-inside: avoid;
  }

  body {
    margin: 0;
    padding: 0;
    zoom: 100%;
  }

  div {
    page-break-inside: avoid;
  }

  /* 禁用打印页脚和页眉 */
  .no-print {
    display: none;
  }

  /* 如果你不想打印特定元素，可以这样设置 */
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }

  /* 保证内容区域不受其他元素影响 */
  .content {
    display: block;
  }
}
</style>
